<template>
	<view class="s-book">
		<scroll-view scroll-y :style="{ height: winHeight + 'px' }" style="width: 200rpx;">
			<view @click="chooseLeftItem( index)" class="leftcontent-item" :class="{ cur: leftActive == index }"
				v-for="(d, index) in list" :key="d.id">{{ d.name }}</view>
		</scroll-view>
		<template v-if="rightList && rightList.length > 0 && showRight">
			<scroll-view scroll-y :style="{ height: winHeight + 'px' }" style="width:550rpx;">
				<uni-collapse accordion>
					<uni-collapse-item showAnimation v-for="(d, index) in rightList" :key="index" :title="d.name">
						<view class="text-content">
							<view v-if="d.sub">书籍介绍:{{ d.sub }}</view>
							<view v-else>暂无介绍</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</scroll-view>
		</template>
		<view v-else><text>暂无数据</text></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				leftActive: 0,
				httplist: [
					'/c1VhBv83d91ed1713b509adaefdbe212c98bb09e47c7b0f/guoxuebook',
					'/c1VhBv83d91ed1713b509adaefdbe212c98bb09e47c7b0f/lishibook',
					'/c1VhBv83d91ed1713b509adaefdbe212c98bb09e47c7b0f/zhexuelist'
				],
				httpUrl: '',
				rightList: [],
				showRight: true
			};
		},
		created() {
			this.getDate();
			// this.getRightDate();
		},
		onLoad() {},
		methods: {
			getDate() {
				// 1 没封装时
				// uni.request({
				// 	url: '/eo/c1VhBv83d91ed1713b509adaefdbe212c98bb09e47c7b0f/getbooks',
				// 	method: 'GET',
				// 	data: {},
				// 	success: res => {
				// 		this.list = res.data.list;
				// 	},
				// 	fail: () => {},
				// 	complete: () => {}
				// });
				// 2封装后
				// this.$get('/eo/c1VhBv83d91ed1713b509adaefdbe212c98bb09e47c7b0f/getbooks').then(res => {
				// 	if (!res.success) return uni.$showMsg()
				// 	this.list = res.list;
				// 	this.chooseLeftItem(0)
				// });
				this.$get('/c1VhBv83d91ed1713b509adaefdbe212c98bb09e47c7b0f/getbooks').then(res => {
					if (!res.success) return uni.$showMsg()
					this.list = res.list;
					this.chooseLeftItem(0)
				});

			},
			chooseLeftItem(index) {
				this.leftActive = index;
				this.httpUrl = this.httplist[index];
				
				this.showRight = false;
				if (!this.httpUrl) {
					this.rightList = []
					return false
				}
				//在右侧移除之后，再显示，  延后到下一个刷新周期
				this.$nextTick(() => {
					this.showRight = true;
				});
				this.getRightDate();
			},
			getRightDate() {
				this.$get(this.httpUrl).then(res => {
					this.rightList = res.list;
				});
			}
		},
		computed: {
			winHeight() {
				return uni.getSystemInfoSync().windowHeight;
			}
		}
	};
</script>
<style lang="scss">
	.s-book {
		display: flex;

		.leftcontent-item {
			padding: 16rpx 12rpx;
			box-sizing: border-box;
			background: #41c560;
		}

		.cur {
			background: transparent;
		}

		.text-content {
			font-size: 13px;
			line-height: 40rpx;
			text-align: justify;
			padding: 26rpx 40rpx;
			background: #f5f5f5;
		}
	}
</style>
